<template>
	<view>
		<uni-nav-bar fixed="true" title="忘记密码" backgroundColor="#f5f5f5" height="120rpx" @clickLeft="back"
			statusBar="true">
			<view slot="left">
				<uni-icons type="back" size="30"></uni-icons>
			</view>
		</uni-nav-bar>
		<u-overlay :show="loading" :mask-click-able="false">
			<view class="warp">
				<view @tap.stop>
					<u-loading-icon :size="60" mode="semicircle" color="#FFFFFF"></u-loading-icon>
				</view>
			</view>
		</u-overlay>
		<view class="body" v-if="!success">
			<view class="title">请输入以下信息重置密码</view>
			<view class="card">
				<input type="number" v-model="uid" placeholder="请输入账号..." placeholder-class="text" />
			</view>
			<view class="card">
				<input type="text" v-model="email" placeholder="请输入注册时填写的邮箱..." placeholder-class="text" />
			</view>
			<view class="btn" @click="reset">
				重置密码
			</view>
		</view>
		<view class="body" v-else>
			<image src="../../static/img/register/ok.png" mode="aspectFill" class="img"></image>
			<view style="text-align: center;font-size: 40rpx;margin-bottom: 30rpx;">
				重置成功
			</view>
			<view class="tip">
				重置的密码已通过邮件发送
			</view>
			<view class="tip">
				为了保障信息安全，请务必在登录后修改密码
			</view>
			<view class="btn" @click="back">
				返回
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				success: false,
				loading: false,
				uid: "",
				email: "",
			}
		},
		methods: {
			reset() {
				if (this.uid == "") {
					uni.showToast({
						icon: "none",
						title: "请输入账号"
					});
					return;
				}
				if (this.email == "") {
					uni.showToast({
						icon: "none",
						title: "请输入注册时的邮箱"
					});
					return;
				}
				if (!this.isEmail(this.email)) {
					uni.showToast({
						icon: "none",
						title: "邮箱格式错误"
					});
					return;
				}
				this.loading = true
				this.$request.TokenRequest({
					url: "/user/resetPassword"
				}, {
					uid: this.uid,
					email: this.email
				}).then(res => {
					if (res.state === 200) {
						this.success = true;
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
					this.loading = false
				})
			},
			back() {
				uni.navigateBack({})
			},
			isEmail(str) {
				var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				return reg.test(str);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 73%;
		margin: 0 auto;
		text-align: center;
	}

	.title {
		margin: 30rpx 0;
		font-size: 40rpx;
	}

	.img {
		margin: 40rpx 0;
		width: 200rpx;
		height: 200rpx;
	}

	.card {
		background-color: #F5F5F5;
		margin: 70rpx auto;
		padding: 40rpx 55rpx;
		border-radius: 50rpx;

		// width: 70%;
		.text {
			font-size: 35rpx;
		}
	}

	.tip {
		color: #B8B8B8;
		font-size: 30rpx;
		line-height: 50rpx;
	}

	.btn {
		font-size: 37rpx;
		color: #FFFFFF;
		background-color: #007AFF;
		width: 360rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		padding: 15rpx;
		border-radius: 40rpx;
		margin: 100rpx auto;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60%;
	}
</style>
